<template>
  <div class="article-detail">
    <el-card class="box-card" v-if="article.id">
      <template #header>
        <div class="card-header">
          <h2 class="title">{{ article.title }}</h2>
          <div class="meta">
            <el-tag v-if="article.isImportant" type="danger" size="small">重要</el-tag>
            <el-tag :type="article.category === 'NOTICE' ? 'warning' : 'success'" size="small">
              {{ article.category === 'NOTICE' ? '公告' : '心理知识' }}
            </el-tag>
            <span class="time">{{ article.createTime }}</span>
          </div>
        </div>
      </template>
      <div class="content" v-html="article.content"></div>
    </el-card>
    <el-empty v-else description="文章不存在或已被删除"></el-empty>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getArticle } from '@/api/article'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const article = ref({
  id: '',
  title: '',
  content: '',
  category: '',
  isImportant: false,
  createTime: '',
  status: ''
})

const loadArticle = async () => {
  const id = Number(route.params.id)
  if (isNaN(id) || id <= 0) {
    ElMessage.error('无效的文章ID')
    router.push('/404')
    return
  }

  try {
    const { data } = await getArticle(id)
    if (data) {
      article.value = data
    } else {
      router.push('/404')
    }
  } catch (error) {
    ElMessage.error('获取文章详情失败')
    console.error('获取文章详情失败:', error)
    router.push('/404')
  }
}

onMounted(() => {
  loadArticle()
})
</script>

<style lang="scss" scoped>
.article-detail {
  padding: 20px;
  
  .card-header {
    .title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
    
    .meta {
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      
      .time {
        color: #909399;
        font-size: 14px;
      }
    }
  }
  
  .content {
    margin-top: 20px;
    line-height: 1.8;
    color: #606266;

    :deep(img) {
      max-width: 100%;
      height: auto;
    }

    :deep(p) {
      margin: 1em 0;
    }

    :deep(table) {
      border-collapse: collapse;
      width: 100%;
      margin: 1em 0;
      
      td, th {
        border: 1px solid #dcdfe6;
        padding: 8px;
      }
      
      th {
        background-color: #f5f7fa;
      }
    }

    :deep(ul), :deep(ol) {
      padding-left: 2em;
      margin: 1em 0;
    }

    :deep(blockquote) {
      margin: 1em 0;
      padding: 1em;
      border-left: 4px solid #409eff;
      background-color: #ecf5ff;
      color: #606266;
    }
  }
}
</style> 